<template>
  <view class="tui-userinfo-box">
    <tui-list-cell padding="0" :arrow="true" @click="changeAvatar">
      <view class="tui-list-cell">
        <view>头像</view>
        <image :src="userInfo.avatarUrl" class="tui-avatar"></image>
      </view>
    </tui-list-cell>
    <tui-list-cell padding="0" :hover="false">
      <view class="tui-list-cell tui-pr30">
        <view>用户名</view>
        <view class="tui-content">{{userInfo.nickName}}</view>
      </view>
    </tui-list-cell>
    <tui-list-cell padding="0" :arrow="true" @click="nickname">
      <view class="tui-list-cell">
        <view>昵称</view>
        <view class="tui-content">{{userInfo.nickName}}</view>
      </view>
    </tui-list-cell>
    <tui-list-cell padding="0">
      <view class="tui-list-cell">
        <view>性别</view>
        <view class="tui-content">{{userInfo.gender==1?'男':'女'}}</view>
      </view>
    </tui-list-cell>
	<view class="btn-area">
		<tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="doLogout">退出登录</tui-button>
	</view>
  </view>
</template>

<script>
import constants from "@/constants";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onLoad() {
    this.initUserInfo();
  },

  methods: {
    initUserInfo() {
      const userInfo = uni.getStorageSync(constants.USERINFOBYWEIXIN);
      userInfo && (this.userInfo = userInfo);
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths[0];
          this.tui.href(
            "/pages/extend/cropper-default/cropper-default?src=" + tempFilePaths
          );
        },
      });
    },
    nickname() {
      this.tui.href("/pagesB/nickname/nickname");
    },
	doLogout() {
		uni.showModal({
		  title: "温馨提示",
		  content: '确认要退出登录吗?',
		  success: (ret) => {
			if (ret.confirm) {
				this.$store.dispatch("USER_LOGOUT")
				this.HANDLE_JUMP_HOME()
			}
		  }
		})
	}
  },
};
</script>

<style>
.tui-userinfo-box {
  margin: 20rpx 0;
  color: #333;
}

.tui-list-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 60rpx 24rpx 30rpx;
  font-size: 30rpx;
}

.tui-pr30 {
  padding-right: 30rpx;
}

.tui-avatar {
  width: 100rpx;
  height: 100rpx;
  display: block;
}

.tui-content {
  font-size: 26rpx;
  color: #666;
}

.btn-area {
	padding: 50rpx;
	margin-top: 100rpx;
}
</style>
